import { Button, Flex, Input } from 'antd'
import { debounce } from 'lodash'
import React, { useCallback } from 'react'

interface TableSelectsProps {
  options: any[]
  source: any
  loading?: boolean
  buttonChildren?: React.ReactNode
  onSearch?: () => void
  onReset?: () => void
}

export type SelectItem = {
  render: React.ReactNode
}
function TableSelects(props: TableSelectsProps) {
  const { options, source, loading, buttonChildren, onSearch, onReset } = props

  const lazySearch = useCallback(
    debounce(() => {
      if (onSearch) {
        onSearch()
      }
    }, 200),
    [onSearch]
  )

  const lazyReset = useCallback(
    debounce(() => {
      if (onReset) {
        onReset()
      }
    }, 200),
    [onReset]
  )
  return (
    <Flex justify="space-between">
      <Flex gap={'2%'}>
        {options.map((item) => {
          return item.render
        })}
        {onReset ? <Button onClick={lazyReset}>重置</Button> : null}
        {onSearch ? <Button onClick={lazySearch}>搜索</Button> : null}
      </Flex>
      {buttonChildren ? buttonChildren : null}
    </Flex>
  )
}

export default TableSelects
